<template>
  <div class="designer_container">
    <img
      @click="gotoPage"
      class="banner cursor"
      src="https://imgs.nexbie.com/uploads/a3f9629dc8c74aa8bbb06718bc7e5e78.webp"
      alt="" />
    <div class="title mt-[40px]">Who Are NEX Pros?</div>
    <div class="flex_nex mt-[40px] pl-[140px] pr-[140px]">
      <div class="img_nex_view mt-[63px]">
        <img
          class="img_nex"
          src="https://imgs.nexbie.com/uploads/5122ef2741074ab78db1ad500cbade44.webp"
          alt="" />
      </div>
      <div class="img_nex_view mb-[63px]">
        <img
          class="img_nex"
          src="https://imgs.nexbie.com/uploads/0a4c9b0dca3c45089fc2d95c7d030ce4.webp"
          alt="" />
      </div>
      <div class="img_nex_view mt-[63px]">
        <img
          class="img_nex"
          src="https://imgs.nexbie.com/uploads/c35c067ffe524536937219b4bc5c9b5c.webp"
          alt="" />
      </div>
    </div>
    <div class="title mt-[80px]">Exclusive Benefits</div>
    <div class="pl-[140px] pr-[140px]">
      <div class="mt-[40px] pr-[120px]">
        <img src="https://imgs.nexbie.com/uploads/b9bc66d8c5954014aa0cef98ec6ca54a.png" alt="" />
      </div>
      <div class="mt-[40px] pl-[120px]">
        <img src="https://imgs.nexbie.com/uploads/7b328554f21242ecae9398a9e9cc22f4.png" alt="" />
      </div>
      <div class="mt-[40px] pr-[120px]">
        <img src="https://imgs.nexbie.com/uploads/ec58350f91a74c2f9a1c53351d0e734c.png" alt="" />
      </div>
    </div>
    <div class="footer mt-[80px]">
      <div class="process_title">Application Process</div>
      <div>
        <div
          v-for="(item, index) in stepList"
          :key="item.id"
          :class="['step_view', index !== stepList?.length - 1 && 'mb-[8px]']">
          <div class="left">
            <img class="icon_img" :src="item.img" alt="" />
            <svg
              v-if="index !== stepList?.length - 1"
              class="mt-[8px]"
              xmlns="http://www.w3.org/2000/svg"
              width="2"
              height="60"
              viewBox="0 0 2 60"
              fill="none">
              <path d="M1 0L1 60" stroke="#F76B1B" stroke-opacity="0.4" stroke-width="2" />
            </svg>
          </div>
          <div class="ml-[24px]">
            <div class="step">{{ item.name }}</div>
            <div class="step_des">{{ item.title }}</div>
            <div class="step_des2">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn_view">
      <div v-hover-gradient class="apply_btn mt-[80px] cursor" @click="gotoPage">Apply Now</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const gotoPage = () => {
    // 在新窗口打开外部链接
    window.open(
      'https://docs.google.com/forms/d/e/1FAIpQLScCQJRu1LIirBE8qM7UCplAQO4TrrNbphxcvJtTC9vYiNr4Bg/viewform?usp=preview',
      '_blank'
    );
  };

  const stepList = ref<any>([
    {
      id: 1,
      name: 'Step 1',
      title: 'Submit Application',
      desc: 'Fill out the application form.',
      img: 'https://imgs.nexbie.com/uploads/21fad6215aaf411e81c461a99639e0cc.png',
    },
    {
      id: 2,
      name: 'Step 2',
      title: 'Qualifications Review',
      desc: 'The official team will review your application within 1-3 business days.',
      img: 'https://imgs.nexbie.com/uploads/4e23ded50f8f42b6af43bc3b750faf86.png',
    },
    {
      id: 3,
      name: 'Step 3',
      title: 'Official Onboarding',
      desc: 'Creators who pass the review will be notified via email.',
      img: 'https://imgs.nexbie.com/uploads/86b9b0a352d94b6db78f7df5a4d1ae9a.png',
    },
  ]);
</script>

<style scoped lang="scss">
  .designer_container {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 80px;
    .cursor {
      cursor: pointer;
    }
    .step_view {
      display: flex;
      flex-direction: row;
      .step {
        color: var(---, #f76b1b);

        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
      .step_des {
        color: var(---9, #222);

        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-top: 16px;
      }
      .step_des2 {
        color: var(---9, #222);

        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
        margin-top: 16px;
      }
    }
    .left {
      display: flex;
      flex-direction: column;
      /* 水平居中（主轴居中） */
      //justify-content: center;
      /* 垂直居中（交叉轴居中） */
      align-items: center;
    }
    .img_nex_view {
      width: 30%;
    }
    .img_nex {
      width: 100%;
      /* 高度自适应（按原始比例计算） */
      height: auto;
      //max-width: 100%;
      ///* 高度不超过容器/原始尺寸，宽度按比例自适应（可选） */
      //max-height: 100%;
      /* 确保高度随宽度按原始比例变化，避免拉伸 */
      //height: auto;
    }
    .apply_btn {
      display: flex;
      height: 64px;
      width: 280px;
      justify-content: center;
      align-items: center;
      border-radius: 8px;
      background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
      color: var(---0, #fff);

      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
    .btn_view {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .footer {
      width: 100%;
      background: #fcf1ec;
      padding: 80px 200px 80px 140px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .process_title {
        color: var(---9, #222);
        text-align: center;

        font-size: 32px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }
      .process_name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
      }
    }
    .flex_ben {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .flex_nex {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .banner {
      width: 100%;
      height: auto;
    }
    .title {
      color: var(---9, #222);
      text-align: center;

      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .icon_img {
      width: 64px;
      height: 64px;
    }
  }
</style>
